<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div th:fragment="goodsPage">
	<div class="bar bar-header-secondary">
		<div class="searchbar row">
		    <div class="col-80">
				<a class="searchbar-cancel" @click="clearSearchText">取消</a>
				<div class="search-input">
			    	<label class="icon icon-search" for="search"></label>
			    	<input type="search" id='search' v-model="search.text" placeholder='输入商品名称...'/>
				</div>
		    </div>
		    <a class="button button-fill button-primary col-20" @click="loadGoods" style="top: 0;">搜索</a>
		</div>
	</div>
	<div class="content" style="top: 2.7rem;bottom: 3rem;">
		<div class="list-block media-list">
		    <ul>
		      <li v-for="goods in goodses">
		        <div class="item-content">
		          <div class="item-media">
		          	<img :src="goods.defaultImage" style='width: 4rem;'>
		          </div>
		          <div class="item-inner">
		            <div class="item-title-row">
		              <div class="item-title">{{goods.name}}&nbsp;&nbsp;（{{goods.properties}}）</div>
			          <div class="item-after">
			          	<span class="iconfont icon-wuuiconsuoxiao button-success" v-if="goods.selected == true" @click="reduceGoods(goods)"></span>
			          	<span style="margin: 0.5rem 0.2rem;">{{goods.selectCount}}</span>
			          	<span class="iconfont icon-add button-danger" @click="addGoods(goods)"></span>
			          </div>
		            </div>
		            <div class="item-subtitle">
		            	<span v-if="!goods.selectCount || goods.selectCount == 0" style="color: #dc3545">
		            		<span v-if="goods.minPrice == goods.maxPrice">{{goods.minPrice_fmt}}</span>
		            		<span v-else>{{goods.minPrice_fmt}}~{{goods.maxPrice_fmt}}</span>
		            	</span>
		            	<span v-if="goods.selectCount > 0" style="color: #dc3545">{{goods.currentPrice_fmt}}</span>
		            	{{goods.weight}}g&nbsp;/&nbsp;{{goods.pack}}</div>
		            <div class="item-text">{{goods.description}}</div>
		          </div>
		        </div>
		      </li>
		      <li v-if="goodses.length == 0"><div class="item-content">没有找到匹配的商品</div></li>
		    </ul>
		</div>
	</div>
	<div class="bar bar-footer-secondary bg-dark" style="bottom: 2.5rem;">
		<div class="row no-gutter" style="line-height: 2.2rem;">
			<div class="col-75"><span class="iconfont icon-gouwuchetianjia"></span> 已选{{settleAccount.totalCount}}，共{{settleAccount.totalAmount}}元</div>
			<div class="col-25 text-center" :class="settleAccount.bg" @click="gotoPay">{{settleAccount.pay}}</div>
		</div>
	</div>
</div>
</body>
</html>